<template>
  <div class="form-table-index">
    <el-table
      class="form-table"
      :row-key="(record: Record<string, any>) => record.key"
      :data="value"
    >
      <template v-if="isVisible">
        <el-table-column
          :label="$t('formgen.subform.seqNo')"
          align="left"
          type="index"
          width="50"
        />
        <template
          v-for="(option, index) in item.childList"
          :key="index"
        >
          <el-table-column align="center">
            <template #header>
              {{ getTableColumnLabel(option) }}
            </template>
            <template #default="scope">
              <div v-if="option.vModel.startsWith('image_upload') && scope.row[option.vModel]">
                <el-image
                  v-for="img in scope.row[option.vModel]"
                  :key="img.url"
                  style="width: 80px; height: 80px"
                  :src="img.url"
                  :preview-src-list="[img.url]"
                ></el-image>
              </div>
              <div v-else>
                {{ showText(scope.row, option.vModel, option) }}
              </div>
            </template>
          </el-table-column>
        </template>
        <el-table-column
          :label="$t('formgen.subform.operation')"
          align="center"
          width="200"
        >
          <template #default="scope">
            <el-button
              link
              type="primary"
              size="default"
              @click="updateDomain(scope.$index, scope.row)"
            >
              {{ $t("formgen.subform.update") }}
            </el-button>
            <el-button
              link
              type="primary"
              @click="copyDomain(scope.row)"
            >
              {{ $t("formgen.subform.copy") }}
            </el-button>
            <el-button
              link
              type="primary"
              size="default"
              @click="removeDomain(scope.$index)"
            >
              {{ $t("formgen.subform.delete") }}
            </el-button>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <div class="add-button">
      <el-button
        link
        type="primary"
        :disabled="disabled"
        @click="addDomain"
        v-if="!checkRowCountMax()"
      >
        {{ $t("formgen.subform.add") }}
      </el-button>
    </div>
    <AddOrUpdate
      v-if="addOrUpdateVisible"
      ref="addOrUpdateRef"
      :fields="item.childList"
      @submit="handleFormSubmit"
    />
  </div>
</template>

<script setup lang="ts" name="TSubForm">
import AddOrUpdate from "./AddOrUpdate.vue";
import { useSubForm } from "@/views/formgen/components/FormItem/SubForm/useSubForm";

const props = defineProps({
  models: {
    type: Object,
    default: () => {}
  },
  value: {
    type: Array,
    default: () => []
  },
  item: {
    type: Object,
    default: () => {}
  }
});

const {
  disabled,
  addOrUpdateRef,
  addOrUpdateVisible,
  isVisible,
  showText,
  getTableColumnLabel,
  removeDomain,
  updateDomain,
  copyDomain,
  addDomain,
  handleFormSubmit,
  checkRowCountMax
} = useSubForm(props);
</script>

<style scoped>
.form-table-index {
  width: 100%;
}

.add-button {
  text-align: center;
  margin-top: 10px;
}
</style>
